<template>
  <div v-if="configObj" :style="boxStyle">
    <div class="top-title" :style="topBgColor" v-if="isShowTitle">
      <span :style="topTitleColor"> {{ configObj.titleContent.val }}</span>
      <div style='margin-left: 20px;' :style="descColor">{{ configObj.descContent.val }}</div>
    </div>
    <!--多行展示-->
    <div class="mobile-page" v-if="isOne">
      <div class="list_menu" :style="gridColumns">
        <template v-for="(item, index) in vuexMenu">
          <div v-show="item.status" class="item">

            <p :style="titleColor">{{ item.info[0].value }}</p>
          </div>
        </template>
      </div>
    </div>
    <!--单行展示-->
    <div class="mobile-page" v-else>
      <div class="home_menu" :style="gridColumns">
        <template v-for="(item, index) in vuexMenu">
          <div v-show="item.status" class="menu-item">
            <p :style="titleColor">{{ item.info[0].value }}</p>
            <!--    <p style="background-color: #eee;margin: 0 5px;padding: 5px 8px;">{{ item.info[0].value }}</p> -->
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex';
export default {
  name: 'home_lables',
  cname: '标签组',
  icon: 't-icon-zujian-zuhezujian',
  configName: 'c_home_lables',
  type: 0, // 0 基础组件 1 营销组件 2工具组件
  defaultName: 'lables', // 外面匹配名称
  props: {
    index: {
      type: null,
    },
    num: {
      type: null,
    },
  },
  computed: {
    ...mapState('mobildConfig', ['defaultArray']),
    //最外层盒子的样式
    boxStyle() {
      return [
        { 'border-radius': this.configObj.bgStyle.val ? this.configObj.bgStyle.val + 'px' : '0' },
        {
          // background: `linear-gradient(${this.configObj.bgColor.color[0].item}, ${this.configObj.bgColor.color[1].item})`,//从上到下
          background: `linear-gradient(to right, ${this.configObj.bgColor.color[0].item}, ${this.configObj.bgColor.color[1].item})`,//从左到右
        },
        { margin: this.configObj.mbConfig.val + 'px' + ' ' + this.configObj.lrConfig.val + 'px' + ' ' + 0 },
        { padding: this.configObj.upConfig.val + 'px' + ' ' + 0 + ' ' + this.configObj.downConfig.val + 'px' },
      ];
    },
    //行数
    gridColumns() {
      if (this.configObj.number.tabVal == 0) {
        return [
          { 'grid-row-gap': this.configObj.contentConfig.val + 'px' },
          { 'grid-template-columns': 'repeat(3, 1fr)' },
        ];
      } else if (this.configObj.number.tabVal == 1) {
        return [
          { 'grid-row-gap': this.configObj.contentConfig.val + 'px' },
          { 'grid-template-columns': 'repeat(4, 1fr)' },
        ];
      } else {
        return [
          { 'grid-row-gap': this.configObj.contentConfig.val + 'px' },
          { 'grid-template-columns': 'repeat(5, 1fr)' },
        ];
      }
    },
    // 标签内容样式
    titleColor() {
      return {
        // color: this.configObj.titleColor.color[0].item,
        // border: `1px solid ${this.configObj.titleColor.color[0].item}`,
        border: `1px solid #666666`,
        'border-radius': this.configObj.contentStyle.val ? this.configObj.contentStyle.val + 'px' : '0',
        padding: this.configObj.upConfig.val + 'px' + ' ' + 0 + ' ' + this.configObj.downConfig.val + 'px',
        margin: this.configObj.lrConfig.val + 'px',
      };
    },
    // 描述文本颜色
    descColor() {
      return {
        color: this.configObj.descColor.color[0].item,
        'line-height': this.configObj.descFontConfig.val + 'px',
        'font-size': this.configObj.descFontConfig.val + 'px',
      };
    },
    // 顶部标题文字颜色
    topTitleColor() {
      return {
        color: this.configObj.topTitleColor.color[0].item,
        'font-weight': this.configObj.fontWeightConfig.val,
        'font-size': this.configObj.titleFontConfig.val + 'px',
        padding: this.configObj.upConfig.val + 'px' + ' ' + 0,
      };
    },
    // 顶部标题背景颜色
    topBgColor() {
      return {
        // background: `linear-gradient(${this.configObj.topBgColor.color[0].item}, ${this.configObj.topBgColor.color[1].item})`,//从上到下
        background: `linear-gradient(to right, ${this.configObj.topBgColor.color[0].item}, ${this.configObj.topBgColor.color[1].item})`,//从左到右
        padding: this.configObj.upConfig.val + 'px',
        margin: this.configObj.lrConfig.val + 'px',
      };
    },
    contentStyle() {
      return {
        'border-radius': this.configObj.contentStyle.val ? this.configObj.contentStyle.val + 'px' : '0',
      };
    },
  },
  watch: {
    pageData: {
      handler(nVal, oVal) {
        this.setConfig(nVal);
      },
      deep: true,
    },
    num: {
      handler(nVal, oVal) {
        let data = this.$store.state.mobildConfig.defaultArray[nVal];
        this.setConfig(data);
      },
      deep: true,
    },
    defaultArray: {
      handler(nVal, oVal) {
        let data = this.$store.state.mobildConfig.defaultArray[this.num];
        this.setConfig(data);
      },
      deep: true,
    },
  },
  data() {
    return {
      // 默认初始化数据禁止修改
      defaultConfig: {
        name: 'lables',
        timestamp: this.num,
        setUp: {
          tabVal: 0,
          cname: '标签组',
        },
        tabConfig: {
          title: '展示样式',
          tabTitle: '展示设置',
          tabVal: 1,
          isShow: 1,
          list: [
            {
              val: '单行展示',
              icon: 'icon-yangshiyi',
            },
            {
              val: '多行展示',
              icon: 'icon-yangshier',
            },
          ],
        },
        rowsNum: {
          title: '显示行数',
          name: 'rowsNum',
          tabVal: 0,
          isShow: 1,
          list: [
            {
              val: '2行',
              icon: 'icon-daohang-2hang',
            },
            {
              val: '3行',
              icon: 'icon-daohang-3hang',
            },
            {
              val: '4行',
              icon: 'icon-daohang-4hang',
            },
          ],
        },
        number: {
          title: '显示个数',
          name: 'number',
          tabVal: 1,
          isShow: 1,
          list: [
            {
              val: '3个',
              icon: 'icon-daohang-3ge',
            },
            {
              val: '4个',
              icon: 'icon-daohang-4ge',
            },
            {
              val: '5个',
              icon: 'icon-daohang-5ge',
            },
          ],
        },
        bgStyle: {
          tabTitle: '圆角设置',
          title: '背景圆角',
          name: 'bgStyle',
          val: 0,
          min: 0,
          max: 30,
        },
        contentStyle: {
          title: '内容圆角',
          name: 'contentStyle',
          val: 3,
          min: 0,
          max: 30,
        },
        menuConfig: {
          tabTitle: '内容设置',
          title: '',
          maxList: 100,
          list: [
            {
              img: '',
              info: [
                {
                  title: '标题',
                  value: '标签1',
                  tips: '选填，不超过6个字',
                  max: 6,
                  //  select:true,
                  status: true,
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100,
                  status: true,
                },
              ],
              status: true,
            },
            {
              img: '',
              info: [
                {
                  title: '标题',
                  value: '标签2',
                  tips: '选填，不超过6个字',
                  max: 6,
                  //  select:true,
                  status: true,
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100,
                  status: true,
                },
              ],
              status: true,
            },
            {
              img: '',
              info: [
                {
                  title: '标题',
                  value: '标签3',
                  tips: '选填，不超过6个字',
                  max: 6,
                  //  select:true,
                  status: true,
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100,
                  status: true,
                },
              ],
              status: true,
            },
            {
              img: '',
              info: [
                {
                  title: '标题',
                  value: '标签4',
                  tips: '选填，不超过6个字',
                  max: 6,
                  //  select:true,
                  status: true,
                },
                {
                  title: '链接',
                  value: '',
                  tips: '请输入链接',
                  max: 100,
                  status: true,
                },
              ],
              status: true,
            },
          ],
        },
        bgColor: {
          tabTitle: '标题设置',
          title: '背景颜色',
          name: 'bgColor',
          color: [
            {
              item: '#fff',
            },
            {
              item: '#fff',
            },
          ],
          default: [
            {
              item: '#fff',
            },
            {
              item: '#fff',
            },
          ],
        },
        // 标签内容的文字颜色
        titleColor: {
          title: '文字颜色',
          name: 'titleColor',
          color: [
            {
              item: '#282828',
            },
          ],
          default: [
            {
              item: '#282828',
            },
          ],
        },
        // -------------------------------------
        // 是否展示标题
        isShowTitleConfig: {
          title: '显示标题',
          tabTitle: '展示设置',
          tabVal: 1,
          isShow: 1,
          list: [
            {
              val: '否',
              icon: '',
            },
            {
              val: '是',
              icon: '',
            },
          ],
        },
        // 标题输入值
        titleContent: {
          title: '标题',
          tabTitle: '标题设置',
          val: '标题',
          place: '请输入标题',
          max: 100,
          isShow: 1
        },
        // 文本描述输入值
        descContent: {
          title: '描述文本',
          tabTitle: '描述文本设置',
          val: '描述文本',
          place: '请输入描述文本',
          max: 100,
          isShow: 1
        },
        // 标题文字大小
        titleFontConfig: {
          tabTitle: '标题字号',
          title: '标题字号',
          val: 16,
          min: 12,
          max: 20,
        },
        // 标题文字加粗
        fontWeightConfig: {
          tabTitle: '标题粗细',
          title: '标题粗细',
          val: 300,
          min: 100,
          max: 600,
        },
        // 标题文字颜色
        topTitleColor: {
          title: '标题颜色',
          name: 'topTitleColor',
          color: [
            {
              item: '#282828',
            },
          ],
          default: [
            {
              item: '#282828',
            },
          ],
        },
        // 标题背景颜色
        topBgColor: {
          title: '标题背景色',
          name: 'topBgColor',
          color: [
            {
              item: '#cacaca',
            },
            {
              item: '#fff',
            },
          ],
          default: [
            {
              item: '#cacaca',
            },
            {
              item: '#fff',
            },
          ],
        },
        // 描述文本字号大小
        descFontConfig: {
          tabTitle: '文本大小',
          title: '文本大小',
          val: 12,
          min: 8,
          max: 20,
        },
        // 描述文本颜色
        descColor: {
          tabTitle: '描述文本设置',
          title: '描述文本设置',
          name: 'descColor',
          color: [
            {
              item: '#282828',
            },
          ],
          default: [
            {
              item: '#282828',
            },
          ],
        },
        // -------------------------------------
        contentConfig: {
          title: '内容间距',
          val: 10,
          min: 0,
          max: 30,
        },
        // 上间距
        upConfig: {
          tabTitle: '边距设置',
          title: '上边距',
          val: 6,
          min: 0,
          max: 100,
        },
        // 下间距
        downConfig: {
          title: '下边距',
          val: 6,
          min: 0,
        },
        // 左右间距
        lrConfig: {
          title: '左右边距',
          val: 5,
          min: 0,
          max: 25,
        },
        // 顶部间距
        mbConfig: {
          title: '顶部间距',
          val: 10,
          min: 0,
        },
      },
      configObj: null,
      vuexMenu: '',
      isOne: 0,
      isShowTitle: 1,
      number: 0,
      rowsNum: 0,
      pageData: {},
    };
  },
  mounted() {
    this.$nextTick(() => {
      if (this.num) {
        this.pageData = this.$store.state.mobildConfig.defaultArray[this.num];
        this.setConfig(this.pageData);
      }
    });
  },
  methods: {
    // 对象转数组
    objToArr(data) {
      let obj = Object.keys(data);
      let m = obj.map((key) => data[key]);
      return m;
    },
    setConfig(data) {
      if (!data) return;
      if (data) {
        this.configObj = data;
        this.isShowTitle = data.isShowTitleConfig.tabVal;
        this.isOne = data.tabConfig.tabVal;
        let rowsNum = data.rowsNum.tabVal;
        let number = data.number.tabVal;
        let list = this.objToArr(data.menuConfig.list);
        this.number = number;
        this.rowsNum = rowsNum;
        let vuexMenu = [];
        if (rowsNum === 0) {
          if (number === 0) {
            vuexMenu = list.splice(0, 6);
          } else if (number === 1) {
            vuexMenu = list.splice(0, 8);
          } else {
            vuexMenu = list.splice(0, 10);
          }
        } else if (rowsNum === 1) {
          if (number === 0) {
            vuexMenu = list.splice(0, 9);
          } else if (number === 1) {
            vuexMenu = list.splice(0, 12);
          } else {
            vuexMenu = list.splice(0, 15);
          }
        } else {
          if (number === 0) {
            vuexMenu = list.splice(0, 12);
          } else if (number === 1) {
            vuexMenu = list.splice(0, 16);
          } else {
            vuexMenu = list.splice(0, 20);
          }
        }
        this.vuexMenu = vuexMenu;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.top-title {
  display: flex;
  // justify-content: space-between;
  align-items: center;
}

.pageOn {
  border-radius: 10px !important;
}

.list_menu {
  padding: 0 12px;
  display: grid;
  grid-template-rows: auto;

  .item {
    font-size: 11px;
    color: #282828;
    text-align: center;

    &.four {
      width: 25%;
    }

    &.five {
      width: 20%;
    }

    .img-box {
      width: 50px;
      height: 50px;
      margin: 0 auto 7px auto;

      &.on {
        border-radius: 50%;

        img,
        .empty-box {
          border-radius: 50%;
        }
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .icon-tu {
    font-size: 16px;
  }
}

.home_menu {
  display: flex;
  overflow: hidden;

  .menu-item {
    font-size: 11px;
    color: #282828;
    text-align: center;
    flex: 0 0 20%;

    .img-box {
      width: 50px;
      height: 50px;
      margin: 0 auto;

      &.on {
        border-radius: 50%;

        img,
        .empty-box {
          border-radius: 50%;
        }
      }
    }

    .box,
    img {
      width: 100%;
      height: 100%;
    }

    .box {
      background: #d8d8d8;
    }

    p {
      margin-top: 5px;
    }

    &:nth-child(5n) {
      margin-right: 0;
    }
  }

  &.on {
    .menu-item {
      margin-right: 51px;

      &:nth-child(5n) {
        margin-right: 51px;
      }

      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }

  .icon-tu {
    font-size: 16px;
  }
}

.dot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;

  &.number {
    bottom: 15px;
  }

  .num {
    width: 25px;
    height: 18px;
    line-height: 18px;
    background-color: #000;
    color: #fff;
    opacity: 0.3;
    border-radius: 8px;
    font-size: 12px;
    text-align: center;
  }

  .dot-item {
    width: 5px;
    height: 5px;
    background: #aaaaaa;
    border-radius: 50%;
    margin: 0 3px;
  }

  &.line-dot {
    .dot-item {
      width: 8px;
      height: 2px;
      background: #aaaaaa;
      margin: 0 3px;
    }
  }
}
</style>
